<script setup>
import { useRouter } from "vue-router";
import { webStore } from "../store/mystore";
import { reactive } from "vue";

const router = useRouter();
const webstore = webStore();
const menus = reactive([
  {
    name: "main",
    path: "/main",
    click: "#",
  },
  {
    name: "父组件向子组件传值",
    path: "/props",
    click: "#",
  },
  {
    name: "子组件向父组件传值",
    path: "/emit",
    click: "#",
  },
  {
    name: "provide和inject",
    path: "/inject",
    click: "#",
  },
  {
    name: "slot",
    path: "/slot",
    click: "#",
  },
  {
    name: "v-model",
    path: "/vmodel",
    click: "#",
  },
  {
    name: "useAttrs",
    path: "/useattrs",
    click: "#",
  },
  {
    name: "ref$parent",
    path: "/ref_parent",
    click: "#",
  },
  // {
  //   name: "logout",
  //   path: "#",
  //   click: "logout",
  // },
]);
const logout = () => {
  webstore.Login = false;
  router.push("/login");
};
</script>

<template>
  <div class="app-container">
    <div class="menu">
      <!-- 动态菜单实现 -->
      <ul v-for="item in menus">
        <router-link :to="item.path" :click="item.click"
          >{{ item.name }}
        </router-link>
      </ul>
      <ul>
        <router-link to="#" @click="logout">logout</router-link>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}

.menu {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
}

.content {
  flex: 1;
  background-color: cornflowerblue;
  padding: 20px;
}
</style>
